.home-box {
	min-height: 100vh;
	line-height: 1;
	padding-bottom: 100rpx;
	background-color: #fff;

	:deep .nav-bar {
		background-color: transparent;
		box-shadow: none;
		color: #fff;

		.arrow-left {
			border-color: #fff;
		}

		.more-icon {
			background-color: #fff;
			&::before,
			&::after {
				background-color: #fff;
			}
		}
	}

	:deep .nav-bar__2 {
		background-color: #fff;
		box-shadow: 0 4px 4px #f4f4f4;
		color: #333;

		.arrow-left {
			border-color: #2c3e50;
		}

		.more-icon {
			background-color: #2c3e50;

			&::before,
			&::after {
				background-color: #2c3e50;
			}
		}
	}

	.user-info-box {
		position: relative;
		width: 100%;
		height: 600rpx;

		.user-bg_img {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.user-info-wrap {
			position: absolute;
			display: flex;
			align-items: center;
			right: 32rpx;
			bottom: -32rpx;

			.user-info__name {
				font-weight: 600;
				font-size: calc(var(--amplified_base) * 40rpx);
				color: #ffffff;
				line-height: calc(var(--amplified_base) * 47rpx);
				margin-right: 24rpx;
			}

			.user-info__avatar {
				width: calc(var(--amplified_base) * 120rpx);
				height: calc(var(--amplified_base) * 120rpx);
				border-radius: 60rpx;
				margin-left: 24rpx;
				flex-shrink: 0;
				box-shadow: 0 0 6rpx #f4f4f4;
			}
		}
	}

	.works-list-box {
		padding: 0 32rpx;

		.year-wrap {
			font-weight: 600;
			font-size: calc(var(--amplified_base) * 40rpx);
			color: #000000;
			line-height: calc(var(--amplified_base) * 47rpx);
			margin-top: 128rpx;
		}

		//月组
		.works-item__dates {
			display: flex;
			margin-top: 48rpx;

			&:nth-child(3) {
				margin-top: 128rpx;
			}

			.dates-wrap {
				min-width: 4em;
				flex-shrink: 0;
				display: flex;

				.day {
					font-weight: 600;
					font-size: calc(var(--amplified_base) * 40rpx);
					color: #000000;
					line-height: calc(var(--amplified_base) * 47rpx);
				}

				.month {
					font-weight: 400;
					font-size: calc(var(--amplified_base) * 24rpx);
					color: #000000;
					line-height: calc(var(--amplified_base) * 56rpx);
					margin-left: 6rpx;
				}
			}
		}

		//日组
		.works-list {
			.works-item {
				display: flex;
				padding: 30rpx 0;

				&:first-child {
					margin-top: 0;
				}
			}
		}

		//作品缩略图
		.works-item__thumbnail {
			flex-shrink: 0;
			width: calc(var(--amplified_base) * 160rpx);
			height: calc(var(--amplified_base) * 160rpx);
			border-radius: 4rpx;
			background-color: transparent;

			.works-item__thumbnail-item {
				width: calc(var(--amplified_base) * 160rpx);
				height: calc(var(--amplified_base) * 160rpx);
				border-radius: 4rpx;
			}
		}

		.works-item__thumbnail-2 {
			position: relative;
			background-color: #cdcdcd;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx; /* 设置圆角 */

			//相机样式
			.camera-box {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.camera-1 {
				position: relative;
				width: calc(var(--amplified_base) * 24rpx); /* 梯形的宽度 */
				height: calc(var(--amplified_base) * 9rpx); /* 梯形的高度 */
				background-color: #fff; /* 梯形的颜色 */
				border-radius: 8rpx 8rpx 0 0;
				clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
			}
			.camera-2 {
				width: calc(var(--amplified_base) * 42rpx); /* 矩形的宽度 */
				height: calc(var(--amplified_base) * 34rpx); /* 矩形的高度 */
				background-color: #fff; /* 矩形的颜色 */
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.camera-3 {
					width: calc(var(--amplified_base) * 14rpx);
					height: calc(var(--amplified_base) * 14rpx);
					border-radius: 50%;
					background-color: #cdcdcd;
				}
			}
		}

		.works-item__thumbnail-2 .lens {
			position: absolute;
			width: calc(var(--amplified_base) * 40rpx); /* 镜头的宽度 */
			height: calc(var(--amplified_base) * 40rpx); /* 镜头的高度 */
			background-color: #fff; /* 镜头的颜色 */
			border-radius: 50%; /* 使其成为圆形 */
			top: calc(50% + 10rpx); /* 镜头居中于矩形内 */
			left: 50%;
			transform: translate(-50%, -50%);
		}

		//缩略图的分布
		.works-item__thumbnail {
			display: grid;
			gap: 4rpx; // 图片之间的间距

			&.has-0-items {
				height: 0;
			}

			// 两张图片
			&.has-2-items {
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr;
			}

			// 三张图片：图一占据左侧的一半，图二图三分别占据右侧的上下各一半
			&.has-3-items {
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr;

				.works-item__thumbnail-item:nth-child(1) {
					grid-area: 1 / 1 / 3 / 2; // 占据左侧整列
				}

				.works-item__thumbnail-item:nth-child(2) {
					grid-area: 1 / 2 / 2 / 3; // 右上角
				}

				.works-item__thumbnail-item:nth-child(3) {
					grid-area: 2 / 2 / 3 / 3; // 右下角
				}
			}

			// 四张图片
			&.has-4-items {
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr;
			}

			// 五张图片：图一占据左上角的九分之四（2*2），图二占据右上角的九分之二（1*2），其余三张平分下方的九分之三
			&.has-5-items {
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr;

				.works-item__thumbnail-item:nth-child(1) {
					grid-area: 1 / 1 / 3 / 3; // 占据左上角九分之四（2*2）
				}

				.works-item__thumbnail-item:nth-child(2) {
					grid-area: 1 / 3 / 3 / 4; // 占据右上角九分之二（1*2）
				}
			}

			// 六张图片：图一占据左上角的九分之四（2*2），其余的平分
			&.has-6-items {
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr;

				.works-item__thumbnail-item:nth-child(1) {
					grid-area: 1 / 1 / 3 / 3; // 占据左上角九分之四（2*2）
				}
			}

			// 七张图片：图一占据1、4两格；图二占据2、5两格，其余平分
			&.has-7-items {
				grid-template-columns: repeat(3, 1fr); // 划分成三列
				grid-template-rows: repeat(3, 1fr); // 划分成三行

				.works-item__thumbnail-item:nth-child(1) {
					grid-area: 1 / 1 / 3 / 2; // 占据1、4两格
				}

				.works-item__thumbnail-item:nth-child(2) {
					grid-area: 1 / 2 / 3 / 3; // 占据2、5两格
				}
			}

			// 八张图片：图一占据1、4两格，其余平分
			&.has-8-items {
				grid-template-columns: repeat(3, 1fr); // 划分成三列
				grid-template-rows: repeat(3, 1fr); // 划分成三行

				.works-item__thumbnail-item:nth-child(1) {
					grid-area: 1 / 1 / 3 / 2; // 占据1、4两格（跨2行，占据第1列）
				}
			}

			// 九张图片：所有平分
			&.has-9-items {
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr;
			}
		}

		//文章
		.works-item__article {
			margin-left: 16rpx;
			font-weight: 400;
			font-size: calc(var(--amplified_base) * 32rpx);
			color: #323232;
			line-height: calc(var(--amplified_base) * 35rpx);
			word-break: break-all;
		}
	}

	//右上角的更多 在下方出现的弹出层
	:deep .more-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 40rpx 0;

		.popup-more-item {
			width: 100%;
			padding: 36rpx 0;
			text-align: center;
		}
	}
}
